import { useState } from 'react';
import BoxItem from '@/components/BoxItem';
import { Button, Col, DatePicker, Flex, Form, Input, Row, Space } from 'antd';
import CustomTable from '../components/CustomTable';

// 时间范围快捷选择
const dateRanges = [
	{ label: '今天', value: 'today' },
	{ label: '近七天', value: 'last7days' },
	{ label: '近三十天', value: 'last30days' },
	{ label: '近三个月', value: 'last3months' }
];

// 表格列定义
const columns = [
	{
		title: '商品编码',
		dataIndex: 'productCode',
		key: 'productCode'
	},
	{
		title: '商品名称',
		dataIndex: 'productName',
		key: 'productName'
	},
	{
		title: '供应商',
		dataIndex: 'supplier',
		key: 'supplier'
	},
	{
		title: '品牌',
		dataIndex: 'brand',
		key: 'brand'
	},
	{
		title: '规格',
		dataIndex: 'spec',
		key: 'spec'
	},
	{
		title: '单位',
		dataIndex: 'unit',
		key: 'unit'
	},
	{
		title: '销量',
		dataIndex: 'salesVolume',
		key: 'salesVolume',
		render: (text: number) => <span>{text} 件</span> // 格式化显示销量
	},
	{
		title: '平均单价',
		dataIndex: 'avgPrice',
		key: 'avgPrice',
		render: (text: number) => <span>{text.toFixed(2)} 元</span> // 格式化单价
	},
	{
		title: '销售额',
		dataIndex: 'salesAmount',
		key: 'salesAmount',
		render: (text: number) => <span>{text.toFixed(2)} 元</span> // 格式化销售额
	},
	{
		title: '成本单价',
		dataIndex: 'costPrice',
		key: 'costPrice',
		render: (text: number) => <span>{text.toFixed(2)} 元</span> // 格式化成本单价
	},
	{
		title: '成本总计',
		dataIndex: 'totalCost',
		key: 'totalCost',
		render: (text: number) => <span>{text.toFixed(2)} 元</span> // 格式化成本总计
	},
	{
		title: '退货率',
		dataIndex: 'returnRate',
		key: 'returnRate',
		render: (text: number) => <span>{text.toFixed(0)}%</span> // 格式化退货率
	},
	{
		title: '毛利',
		dataIndex: 'grossProfit',
		key: 'grossProfit',
		render: (text: number) => <span>{text.toFixed(2)} 元</span> // 格式化毛利
	},
	{
		title: '毛利率',
		dataIndex: 'grossProfitRate',
		key: 'grossProfitRate',
		render: (text: number) => <span>{text.toFixed(2)}%</span> // 格式化毛利率
	},
	{
		title: '操作',
		key: 'action',
		render: (record: any) => (
			<Button onClick={() => handleViewDetail(record)} type="link">
				详情
			</Button>
		)
	}
];

// 假数据
const data = [
	{
		key: '1',
		productCode: 'P001',
		productName: '商品A',
		supplier: '供应商A',
		brand: '品牌A',
		spec: '规格A',
		unit: '个',
		salesVolume: 100,
		avgPrice: 50.5,
		salesAmount: 5050,
		costPrice: 30.0,
		totalCost: 3000,
		returnRate: 5.0,
		grossProfit: 2050,
		grossProfitRate: 40.5
	},
	{
		key: '2',
		productCode: 'P002',
		productName: '商品B',
		supplier: '供应商B',
		brand: '品牌B',
		spec: '规格B',
		unit: '件',
		salesVolume: 200,
		avgPrice: 40.0,
		salesAmount: 8000,
		costPrice: 25.0,
		totalCost: 5000,
		returnRate: 3.0,
		grossProfit: 3000,
		grossProfitRate: 37.5
	},
	{
		key: '3',
		productCode: 'P003',
		productName: '商品C',
		supplier: '供应商C',
		brand: '品牌C',
		spec: '规格C',
		unit: '箱',
		salesVolume: 150,
		avgPrice: 60.0,
		salesAmount: 9000,
		costPrice: 35.0,
		totalCost: 5250,
		returnRate: 2.0,
		grossProfit: 3749,
		grossProfitRate: 41.5
	},
	{
		key: '4',
		productCode: 'P004',
		productName: '商品D',
		supplier: '供应商D',
		brand: '品牌D',
		spec: '规格D',
		unit: '个',
		salesVolume: 120,
		avgPrice: 45.0,
		salesAmount: 5400,
		costPrice: 28.0,
		totalCost: 3360,
		returnRate: 4.0,
		grossProfit: 2040,
		grossProfitRate: 37.7
	},
	{
		key: '5',
		productCode: 'P005',
		productName: '商品E',
		supplier: '供应商E',
		brand: '品牌E',
		spec: '规格E',
		unit: '件',
		salesVolume: 180,
		avgPrice: 55.0,
		salesAmount: 9900,
		costPrice: 40.0,
		totalCost: 7200,
		returnRate: 3.5,
		grossProfit: 2700,
		grossProfitRate: 27.3
	}
];

// 处理查看详情
const handleViewDetail = (record: any) => {
	console.log('查看商品详情：', record);
};

export default function CategoryDetails() {
	const [keyword, setKeyword] = useState('');
	const [startDate, setStartDate] = useState(null);
	const [endDate, setEndDate] = useState(null);

	const handleSearch = () => {
		console.log('执行搜索，关键词:', keyword, '起始时间:', startDate, '结束时间:', endDate);
		// 在这里实现实际的搜索逻辑，例如调用接口
	};

	const resetFilters = () => {
		setKeyword(''); // 重置关键词
		setStartDate(null); // 重置开始时间
		setEndDate(null); // 重置结束时间
	};

	// 时间范围快捷选择
	const handleDateChange = (value: string) => {
		const today = new Date();
		let startDate: any = null;
		let endDate: any = today;

		switch (value) {
			case 'today':
				startDate = endDate;
				break;
			case 'last7days':
				startDate = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
				break;
			case 'last30days':
				startDate = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
				break;
			case 'last3months':
				startDate = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());
				break;
			default:
				break;
		}

		setStartDate(startDate);
		setEndDate(endDate);
	};

	return (
		<div>
			<BoxItem>
				<Flex gap="small" wrap>
					<Button type="primary">新建</Button>
					<Button>导入</Button>
					<Button>导出</Button>
				</Flex>
			</BoxItem>
			<BoxItem>
				<Form layout="inline" onFinish={handleSearch}>
					<Row gutter={16} justify="start">
						{/* 关键词输入框 */}
						<Col>
							<Form.Item label="关键词" name="keyword">
								<Input
									value={keyword}
									onChange={e => setKeyword(e.target.value)}
									placeholder="请输入关键词"
									style={{ width: 160, marginBottom: '20px' }}
								/>
							</Form.Item>
						</Col>

						{/* 起止时间 */}
						<Col>
							<Form.Item label="创建时间" name="startDate">
								<DatePicker
									value={startDate}
									onChange={date => setStartDate(date)}
									style={{ width: 180 }}
									placeholder="起始时间"
									allowClear
								/>
							</Form.Item>
						</Col>
						<Col>
							<Form.Item label="至" name="endDate">
								<DatePicker
									value={endDate}
									onChange={date => setEndDate(date)}
									style={{ width: 180 }}
									placeholder="结束时间"
									allowClear
								/>
							</Form.Item>
						</Col>

						{/* 快捷时间选择 */}
						<Col>
							<Space>
								{dateRanges.map(({ label, value }) => (
									<Button key={value} onClick={() => handleDateChange(value)}>
										{label}
									</Button>
								))}
							</Space>
						</Col>

						{/* 搜索和重置按钮 */}
						<Col>
							<Button type="primary" htmlType="submit">
								搜索
							</Button>
							<Button type="default" onClick={resetFilters}>
								重置
							</Button>
						</Col>
					</Row>
				</Form>
			</BoxItem>

			<BoxItem>
				<CustomTable dataSource={data} columns={columns} rowKey="key" pagination={true} />
			</BoxItem>
		</div>
	);
}
